import React, { useState } from 'react'
import Picker from 'emoji-picker-react';

import style from "./index.scss"
import smilingFace from "@/images/smiling-face.png"
import tuPian from "@/images/tu-pian.png"

export default function Index(props: { hasHead?: boolean }) {
  const textAreaValue = useState("")
  return (
    <div className={style.messageBox}>
      {props.hasHead ? <div className={style.head}>
        <img className={style.headImg}></img>
      </div> : null}
      <textarea className={`${style.textArea} ${style.heighter}`}></textarea>
      <div className={style.bottom}>
        <div className={style.bottomLeft}>
          <img className={`${style.bottomLeftIcon} ${style.bottomLeftIconSmil}`} src={smilingFace} />
          <img className={`${style.bottomLeftIcon} ${style.bottomLeftIconTu}`} src={tuPian} />
        </div>
        <div className={style.bottomRight}>
          <div className={style.bottomRightBtn}>留言</div>
        </div>
      </div>
      <div>
        <Picker onEmojiClick={(ev, data) => {
          console.log(ev, data)
        }} />
      </div>
    </div>
  )
}